<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    @open='getData'
    @close = '$emit("update:dialogVisible", false)'
    size='large'
    :top='setTop'>
    <el-table 
      max-height='460'
     :data='tableData'
     class='monitor-dialog-table'
     :class='colorStyle'
     :row-style	='handleRowColor'
    >
      <el-table-column
        v-for = '(k,i) in tableCol'
        :label = 'k.label'
        :prop = 'k.value'
        :key='i'
				:width="k.width"
        :min-width ='setMinWidth(k.label)'
        align='center'
      >
      </el-table-column>
    </el-table>

  </el-dialog>
</template>

<script>
import Axios from 'axios'
import Vue from 'vue'
import { Loading } from 'element-ui'
import Bus from './Bus'
Vue.use(Loading)

export default {
	props: {
		dialogVisible: {
			type: Boolean,
			default: false
		},
		dialogParams: {
			type: Object,
			default: {},
			require: true
		}
	},
	data () {
		return {
			visible: false,
			loading: false,
			tableCol: [
				{
					label: '薪资组描述',
					value: 'gp_descr'
				},

				{
					label: '日历组描述',
					value: 'cal_desrc'
				},
				{
					label: '支付日期',
					value: 'pay_dt',
					width: '90px'
				}, {
					label: '应付日期',
					value: 'pay_dt_work',
					width: '90px'
				}, {
					label: '完成日期',
					value: 'real_pay_dt',
					width: '90px'
				}, {
					label: '完成状态',
					value: 'finish_status'
				}],
			tableData: [],
			params: {},
			date: {}
		}
	},
	watch: {
		dialogVisible (newValue) {
			this.visible = newValue
			this.params = this.dialogParams
		}
	},
	computed: {
		colorStyle () {
			return this.params.color
		},
		title () {
			return `${this.params.setid}的薪资组明细`
		},
		setTop () {
			if (this.tableData && this.tableData.length >= 10) {
				return '4vh'
			}
			return '20vh'
		},
	},
	methods: {

		handleRowColor (row) {

			if (new Date(row.real_pay_dt) <= new Date(row.pay_dt_work)) {
				return 'background-color:rgb(224, 246, 213)'
				// greeb
			} else if (new Date(row.real_pay_dt) > new Date(row.pay_dt_work)) {
				// yellow
				return 'background-color: rgba(255, 244, 94,.5)'
			} else {
				// red
				return 'background-color: #FEF0F0'
			}
		},

		getData () {
			const params = {
				setid: this.params.setid,
				beginDate: this.date.beginDate,
				endDate: this.date.endDate,
				token: localStorage.getItem('token')
			}

			const loding = Loading.service({
				target: document.querySelector('.contentBox'),
				text: '加载中'
			})
			Axios.post(this.Axios.baseURI + this.URL.getSalaryMonitoringDetail.url, params)
				.then((res) => {
					this.tableData = res.data.datas
					loding.close()
				})
		},
		setMinWidth (type) {
			switch (type) {
			case '薪资组':
				return 120
				break

			case '薪资组描述':
				return 240
				break

			case '日历':
				return 150
				break

			case '日历组':
				return 180
				break

			case '日历组描述':
				return 360
				break

			case '支付日期':
				return 160
				break

			case '应付日期':
				return 200
				break

			case '完成日期':
				return 200
				break

			case '完成状态':
				return 150
				break

			default:
				break
			}
		}
	},
	mounted () {
		Bus.$on('date', (data) => this.date = data)
	}
}
</script>

<style lang='less'>
.monitor-dialog-table.red {
  tr {
    // background-color: #f3dfdf;
    &:hover > td {
      // background-color: #f3dfdf !important;
    }
  }
}

.monitor-dialog-table.yellow {
  tr {
    // background-color: #fff7e5;
    &:hover > td {
      // background-color: #fff7e5 !important;
    }
  }
}

.monitor-dialog-table.green {
  // background-color: #dff1d9;

  tr {
    // background-color: #dff1d9;
    &:hover > td {
      // background-color: #dff1d9 !important;
    }
  }
}
.monitor-dialog-table .el-table__body-wrapper .el-table__row {
  cursor: default;
}
</style>